<template>
  <!-- FBA发货单 -->
  <div class="diff-list-wrap">
    <a-tabs v-model:active-key="activeTabName" @change="defaultSearchVal = {}" size="mini">
      <a-tab-pane key="fba" title="FBA货件" />
      <a-tab-pane key="fbaItem" title="FBA货件明细" />
      <a-tab-pane key="fbaReceivedItem" title="FBA货件收货明细" />
    </a-tabs>
    <FbaDifferenc v-if="activeTabName === 'fba'" @changeTab="changeTab" />
    <FbaItemDifference v-if="activeTabName === 'fbaItem'" :defaultSearchVal="defaultSearchVal" @changeTab="changeTab" />
    <FbaReceivedItemDifference v-if="activeTabName === 'fbaReceivedItem'" :defaultSearchVal="defaultSearchVal" />
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import FbaDifferenc from './components/fbaDifference.vue'
  import FbaItemDifference from './components/fbaItemDifference.vue'
  import FbaReceivedItemDifference from './components/fbaReceivedItemDifference.vue'

  const activeTabName = ref('fba')
  const defaultSearchVal = ref<any>({})

  function changeTab(info: any) {
    defaultSearchVal.value = info.searchVal
    activeTabName.value = info.tabName
  }
</script>
<style lang="less" scoped>
  :deep(.arco-tabs-nav-tab) {
    background-color: #fff;
  }
</style>
